<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/activityGrouping.css" rel="stylesheet" type="text/css" />
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <style type="text/css">
      .bot-activity-decorator {
        min-height: 60px;
        position: relative;
      }

      .bot-activity-decorator .bot-activity-decorator__content {
        padding-left: 40px;
      }

      .bot-activity-decorator .bot-activity-decorator__button-bar {
        list-style-type: none;
        margin: 0 0 0 10px;
        padding: 0;
        position: absolute;
      }

      .bot-activity-decorator .bot-activity-decorator__button-bar .bot-activity-decorator__button {
        background: White;
        border: solid 1px #e6e6e6;
        margin-bottom: 2px;
        padding: 2px 5px 5px;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useCallback },
        WebChat: {
          hooks: { useSendPostBack }
        }
      } = window;

      const BotActivityDecorator = ({ activityID, children }) => (
        <div className="bot-activity-decorator">
          <ul className="bot-activity-decorator__button-bar">
            <li>
              <button className="bot-activity-decorator__button">U</button>
            </li>
            <li>
              <button className="bot-activity-decorator__button">D</button>
            </li>
          </ul>
          <div className="bot-activity-decorator__content">{children}</div>
        </div>
      );

      const activityMiddleware = () => next => (...args) => {
        const [
          {
            activity,
            activity: {
              from: { role }
            }
          }
        ] = args;

        if (role === 'bot') {
          const { id } = activity;

          return (...renderArgs) => (
            <BotActivityDecorator key={id} activityID={id}>
              {next(...args)(...renderArgs)}
            </BotActivityDecorator>
          );
        }

        return next(...args);
      };

      run(async function () {
        const now = Date.now();

        WebChat.renderWebChat(
          {
            activityMiddleware,
            directLine: await testHelpers.createDirectLineWithTranscript('multiple-lines-multiple-files.json'),
            store: testHelpers.createStore()
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await host.snapshot();
      });
    </script>
  </body>
</html>
